/* style/base/EZ/graph.css */
.EZgraph{
  overflow: hidden;
}
/* style/base/EZ/imagebox.css */
.EZimagebox{
  display: flex;
  flex-wrap: wrap;
}
.EZimagebox > *{
  width: 16.6%;
  height: 60px;
  font-size: 30px;
  flex-shrink: 0;
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24 !important;
}
/* style/base/EZ/leftbar.css */
.EZleftbar{
  z-index: 100000;
  height: 100%;
  width: 50px;
  transition: width 0.4s;
  position: absolute;
  overflow: hidden;
  & > .inner{
    width: 300px;
    height: 100%;
    overflow-y: auto;
  }
  &:hover, &.hld, &.hlda{width: 300px;}
}
/* style/base/EZ/mobilemenu.css */
.srlt.mblb{
  z-index: 10000;
  height: 50px;
  width: 100%;
  bottom: 0;
  position: absolute;
  overflow: hidden;
  & > .inner{
    display: flex;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    & > *{
      height: 100%;
    }
  }
}
/* style/base/EZ/topbar.css */
.srlt.tpbr{
  z-index: 10000;
  height: 50px;
  width: 100%;
  position: absolute;
  overflow: hidden;
  & > .inner{
    display: flex;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    & > *{
      height: 100%;
    }
  }
}
/* style/base/base.css */
.srlt{
  box-sizing: border-box;
  &.title{
    width:100%;
    text-align: center;
    font-weight: bold;
    display: flex;
    align-items: center;
    height: 35px;
    & > .lbl{flex-grow: 1;}
    & > :not(.lbl){width:35px;font-size: 19px;height: 100%;}
  }
  &.acnt{
    background-color: var(--accent-color);
    color: var(--accent-text-color);
  }
  &.hplk, & a{
    color: #01aebf;
    font-weight: bold;
    text-decoration: none;
  }
  &.dragble > .title{cursor: default;}
  &.content{overflow-y: auto;}
  &.cntxt:not(.npd):not(.button){padding: var(--text-padding);}
  &.buttonbar{text-align: center;}
  &.drkr{background-color: var(--darker);}
  &.dbdrkr{background-color: rgba(0,0,0,.4);}
  &.gppd > *, &.gppd > .button{margin: var(--margin);}/* gapped */
  &.pddd:not(.npd){padding: var(--item-padding) !important;}
  &.bpddd:not(.npd){padding: var(--item-big-padding) !important;}
  &.scrly{overflow-y: auto;}
  &.nscr{overflow: hidden;}
  &.cnimg{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  &.crcl{border-radius: 50%;}
  &.icon{
    text-shadow: none;
    display: grid;
    align-items: center;
    text-align: center;
    padding: 0;
    td&, th&{display: revert;}
  }
  /* text color */
  &.pstx{color:var(--positive-text-color);}
  &.ngtx{color:var(--negative-text-color);}
  &.tptb, &.tpmn{
    position: fixed;
    z-index: 11000;
    right:100px;
    width:200px;
  }
  &.tptb{
    top:0px;
    text-align: center;
    border-bottom-left-radius: var(--toptab-border-radius);
    border-bottom-right-radius: var(--toptab-border-radius);
    font-weight: bold;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  &.tpmn{
    &:not(.opn):not(.hld){display: none;}
    top: 25px;
    border-radius: var(--toptab-border-radius);
    & > .usr{
      padding: 10px 0;
    }
    & > .usr > .ava{
      margin: auto;
      border-radius: 50%;
      height: 70px;
      width: 70px;
    }
    & > .usr > .unm{
      text-align: center;
    }
  }
}
/* html, body */
html, body{
  margin: 0;
  padding: 0;
  width: 100%;
}
body{
  min-height: 100%;
}
html {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  height: 100%;
  font-size: 13px;
  line-height: 15px;
  /* text-shadow: 1px 1px 0px black, 1px -1px 0px black, -1px 1px 0px black, -1px -1px 0px black, 0px 1px 0px black, 0px -1px 0px black, -1px 0px 0px black, 1px 0px 0px black; */
  text-shadow: var(--text-shadow);
}
/* material related */
.material-symbols-sharp {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 40
}
/* style/base/border.css */
th.srlt:after{
  border-bottom: 1px solid var(--border-color);
  width: 100%;
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
}
.srlt{
  &.brdrr{border-right: 1px solid var(--border-color);}/* border right */
  &.brdrl{border-left: 1px solid var(--border-color);}/* border left */
  &.brdrt{border-top: 1px solid var(--border-color);}/* border top */
  &.brdrb{border-bottom: 1px solid var(--border-color);}/* border bottom */
  &.brdr{border: 1px solid var(--border-color);}/* all border */
}
/* style/base/button.css */
.srlt{
  &.button{
    cursor: pointer;
    display: inline-block;
    padding: 6px 13px;
    font-size: 12px;
    border-style: solid;
    border-radius: var(--button-radius);
    /* border-image: var(--buttonborder-image); */
    /* box-shadow: var(--button-shadow); */
    /* border-radius: 3px; */
    margin: 3px;
    -webkit-user-select: none;
    user-select: none;
    &.disabled{
      border-style: dashed;
    }
    &:not(.disabled):hover, &.hover{
      border-style: outset;
    }
    &:not(.disabled):active, &.active{
      border-style: inset;
    }
    /* regular button */
    &:not(.sbu){
      &:not(.disabled):hover, &.hover{
        background-color: var(--button-hoverbg);
      }
      border-color: var(--buttonborder-color);
      background-color: var(--button-bg);
      border-width: var(--buttonborder-width);
    }
    /* accented button */
    &.sbu{
      &:not(.disabled):hover, &.hover{
        background-color: var(--button-accent-hoverbg);
      }
      &:not(.disabled):active, &.active{
        background-color: var(--button-accent-activebg);
      }
      border-color: var(--button-accent-border-color);
      background-color: var(--button-accent-bgcolor);
      color: var(--button-accent-color);
      border-width: var(--button-accent-border-width);
    }
  }
  &.clkbl:hover{
    background-color: var(--button-hoverbg);
    cursor: pointer;
  }
  &.wbu > .button{
    text-align: center;
    display: block;
  }
}
/* style/base/centering.css */
.bkcntr, .fscont{
  top: var(--usablespace-top);
  bottom: var(--usablespace-bottom);
  left: var(--usablespace-left);
  right: var(--usablespace-right);
	pointer-events: none;
	position:fixed;
  & > *{
    pointer-events: auto;
  }
}
.bkcntr{
	z-index:10000;
	display:flex;
}
.fscont{
	z-index:9000;
  display: flex;
  & > .xpndd{order:200;flex-grow: 1;max-width: 100%;}
  & > :not(.xpndd){flex-shrink: 0;}
}
.fscontmpty{
  flex-grow: 1;
  order: 200;
}
.cntr{
	pointer-events: auto;
	max-width: 100%;
	max-height: 100%;
	margin: auto;
  overflow-x: hidden;
	overflow-y: auto;
  display: flex;
  flex-direction: column;
  & > .content{flex-shrink: 1;}
  & > :not(.content){flex-shrink: 0;}
}
/* style/base/customicons.css */
.srlt{
  &.icon_test{
    mask-image: url(../icons/test.svg);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 22px;
  }
  &.csic{
    &.acnt{background-color: var(--accent-text-color);}
    &:not(.acnt){background-color: var(--text-color);}
  }
  &.acnt{
    & .csic{background-color: var(--accent-text-color);}
  }
}
/* style/base/discordformatting.css */
.srlt-list{
  display: inline list-item;
}
.srlt-sublist{
  display: inline list-item;
  list-style: circle;
  padding-left: 10px;
}
.srlt h1, .srlt h2, .srlt h3{
  display: inline-block;
}
.srlt h1{
  margin-top: 10px;
  margin-bottom: 10px;
  text-decoration-line: underline;
  text-decoration-color: var(--highlight-color);
}
.srlt h2{
  margin-top: 6px;
  margin-bottom: 6px;

}
.srlt h3{
  margin-top: 3px;
  margin-bottom: 3px;
}
/* style/base/flex.css */
.srlt{
  &.flex{
    display: flex;
    flex-wrap: wrap;
  }
  &.flxflw{
    display: flex;
    flex-direction: column;
  }
  &.flexhorizontal{
    display: flex;
    align-items: center;
    flex-direction: row;
  }
  &.flexvertical, &.rsblmlbx{
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  &.rsblmlbx{
    overflow-y: hidden;
    & > :not(:last-child){resize: vertical;border-bottom: 1px solid var(--border-color);}
    & > :last-child{
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 0;
    }
    & > *{
      overflow: hidden;
      width: 100%;
      min-height: 10%;
    }
  }
  &.flexgrow{
    flex-basis: min-content;
    flex-grow: 1;
    flex-shrink: 1;
  }
  &.flexshrink{
    flex-basis: min-content;
    flex-shrink: 1;
  }
  &.nshrk{
    flex-shrink: 0;
  }
  &.nwrp{
    flex-wrap: nowrap;
  }
  &.flxceqsz > *{
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 1px;
  }
}
/* style/base/form.css */
.srlt{
  & input:not(.sprnpt > input):not([type=checkbox]), & select{
    /* background: none; */
    border-width: 1px;
    border-color: var(--border-color);
    border-style: solid;
    color:var(--text-color);
    width: 50%;
    min-width: 200px;
    height: 23px;
  }
  & fieldset{
    border-width: 1px;
    border-color: var(--border-color);
    padding: 7px 15px 15px 15px;
  }
  & legend{
    margin: auto;
    height:16px;
  }
  & textarea{
    /* width: 100%; */
    width: stretch;
    width: -moz-available;
    width: -webkit-fill-available;
    resize: vertical;
    /* background: none; */
    border-width: 1px;
    border-color: var(--border-color);
    border-style: solid;
    color:var(--text-color);
  }
}

/* select.srlt, ::picker(select.srlt){
  appearance: base-select;
  &:hover, &:focus{
    background-color: var(--button-hoverbg);
  }
} */



/* super input */
.sprnpt {
  border-width: 1px;
  border-color: var(--border-color);
  border-style: solid;
  width: 200px;
  display: inline-flex;
}
.sprnpt > input{
  background: none;
  border-width: 0px;
  border-style: none;
  color:var(--text-color);
  flex-grow: 1;
}
.sprnpt > div{
  width: 30px;
  font-size: 16px;
}
/* style/base/gauge.css */
.srlt.gauge{
  margin:5px;
  background: linear-gradient(black, gray 65%, black);
  border: 2px solid black;
  & > .srlt.inner{
    height:5px;
    background: linear-gradient(green, white 35%, darkgreen);
    transition: width 0.4s;
  }
}
/* style/base/grid.css */
.srlt.grid{
  display: grid;
}
/* style/base/mobile.css */
@media (aspect-ratio < 1){/* mobile? */
  .srlt{
    &.mblx{
      display:none;
    }
  }
}
@media (aspect-ratio >= 1){/* horizontal screen */
  .srlt{
    &.mblo{
      display:none;
    }
  }
}
/* style/base/qrcode.css */
.srlt.qrlt{
  & > div{
    padding: 5px;
    margin: auto;
    background-color: white;
    aspect-ratio: 1 / 1;
    & > img{
      height: 100%;
      width: 100%;
    }
  }
}
/* style/base/tab.css */
.srlt{
  /* tablines */
  &.tbln{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row;
    & > *{
      text-align: center;
      flex-shrink: 0;
      padding: 5px;
      min-width: 100px;
    }
    &.eqsz > *{
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 1;
    }
  }
  /* tabs */
  &.tab{
    padding: 0 20px;
    & > .cntxt.lbl{
      padding-top: 5px;
      padding-bottom: 5px;
    }
    &.sel > .cntxt.lbl{
      padding-bottom: 3px;
      border-bottom: 2px solid var(--border-color);
    }
  }
}
/* style/base/table.css */
table.srlt{
  border-collapse: collapse;
}
th.srlt{
  background-color: var(--accent-color);
  color: var(--accent-text-color);
  top:0px;
  position: sticky;
}
/* style/colorthemes/Dark Ruby Translucent.css */
:root{
  color-scheme: dark;
  --theme-font: "Montserrat", sans-serif;;
  --sel-background-color:rgba(30,30,30,1);
  --text-color:#EEEEEE;
  --highlight-color:#b182c4;
  --border-color:#716262;
  --centered-shadow:0px 0px 3px black;
  --centered-border-radius:4px;
  --toptab-border-radius:4px;
  /* background colors */
  --background-color:rgba(51, 33, 33, .95);
  --background-color-error:rgba(70, 33, 33, 1);
  --background-color-info:rgba(33, 33, 70, 1);
  --background-color-warning:rgba(70, 70, 33, 1);
  /* Title bars and accent colors */
  --accent-color:rgba(40,20,20,0.8);
  --accent-text-color:#EEEEEE;
  --accent-color-error:rgba(40,20,20,1);
  --accent-color-info:rgba(40,20,20,1);
  --accent-color-warning:rgba(40,20,20,1);
  /* text */
  --text-padding:3px;
  --positive-text-color: #b6abff;
  --negative-text-color: #ffcece;
  /* button related */
  --button-bg:rgba(0,0,0,.5);
  --buttonborder-width:1px;
  --buttonborder-color:rgba(255,255,255,.5);
  --button-hoverbg:rgba(30,30,30,.5);
  --button-activecolor:#333 #555 #FFF #EEE;
  --button-radius: 3px;
  --button-accent-bgcolor:rgba(20,0,0,.5);
  --button-accent-hoverbg:rgba(50,30,30,.5);;
  --button-accent-activebg:rgba(50,30,30,.5);;
  --button-accent-color:#EEEEEE;
  --button-accent-border-color:rgba(255,255,255,.5);
  --button-accent-border-width:1px;
  --button-shadow:
    0px 3px 1px rgba(200,200,200,0.5) inset,
    -3px 0px 1px rgba(150,150,150,0.5) inset,
    0px -3px 1px rgba(50,50,50,0.5) inset,
    3px 0px 1px rgba(100,100,100,0.5) inset;
  --button-activeshadow:
    0px -3px 1px rgba(200,200,200,0.5) inset,
    3px 0px 1px rgba(150,150,150,0.5) inset,
    0px 3px 1px rgba(50,50,50,0.5) inset,
    -3px 0px 1px rgba(100,100,100,0.5) inset;
  --item-padding: 5px;
  --item-big-padding: 15px;
  --margin: 5px;
  --big-margin: 15px;
  --shadow-color: rgba(0,0,0,0.4);
  --text-shadow: 0px 0px 2px black, 0px 0px 2px black;
  --darker: rgb(0,0,0,0.2);
}
/* style/themes/Default.css */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@100..700&display=swap');
html {
  font-family: var(--theme-font);
  font-optical-sizing: auto;
  /* font-weight: 300; */
  font-style: normal;
}
.srlt.drkr {
  /* box-shadow: inset 0px 5px 50px var(--shadow-color), inset 0px -5px 50px var(--shadow-color); */
}
.srlt.cntr.anmtn{
  animation-duration: .1s;
  animation-name: zoom-in;
}
@keyframes zoom-in {
  from {
    scale: 90%;
    opacity: 0;
  }

  to {
    scale: 100%;
    opacity: 1;
  }
}
.srlt.rtt{
  animation-duration: 4s;
  animation-name: rotate180;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  /* width: 50px; */
  aspect-ratio: 1;
  border-radius: 50%;
  margin: auto;
}
@keyframes rotate180 {
  0% {
    rotate: 0deg;
  }

  40% {
    rotate: 180deg;
  }

  50% {
    rotate: 180deg;
  }
  80% {
    rotate: 360deg;
  }

  100% {
    rotate: 360deg;
  }
}
.srlt{
  &.lv0:not(.acnt){
    color: var(--text-color);

    &:not(.dlg):not(.acnt){background-color: var(--background-color);}
  }
  &.dlg{
    &.error{background-color: var(--background-color-error);}
    &.info{background-color: var(--background-color-info);}
    &.warning{background-color: var(--background-color-warning);}
  }
  &{    
    &:not(.dlg) > .title{
      background-color: var(--accent-color);
      color: var(--accent-text-color);
    }
    /* &.error > .title{
      background-color: var(--accent-color-error);
      color: var(--accent-text-color-error);
    }
    &.info > .title{
      background-color: var(--accent-color-info);
      color: var(--accent-text-color-info);
    }
    &.warning > .title{
      background-color: var(--accent-color-warning);
      color: var(--accent-text-color-warning);
    } */
  }
  &.sel, &.selb:hover{background-color: var(--sel-background-color);}
  &.hghlgt{
    font-weight: bold;
    color: var(--highlight-color);
  }
  &.hmrgd{
    margin-left: var(--margin);
    margin-right: var(--margin);
  }
  &.mrgd{margin: var(--margin);}
  &.tmrgd{margin-top: var(--margin);}
  &.bmrgd{margin-bottom: var(--margin);}
}
.srlt:not(.fscont) > .cntr:not(.nshdw){
  border-radius: var(--centered-border-radius);
  box-shadow: var(--centered-shadow);
}